<template>
  <div @contextmenu.prevent="showContextMenu" @click="closeContextMenu" class="container">
    <!-- 你的页面内容 -->

    <div v-if="showMenu" :style="menuStyle" class="context-menu">
      <div v-for="(item, index) in menuItems" :key="index" class="menu-item" @click.stop="handleMenuItem(item)">
        <el-icon><CirclePlus /></el-icon>
        <span style="margin-left: 5px">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'DwContentMenu',
});

import { ref } from 'vue';

const showMenu = ref(false);

const menuStyle = ref({});

const menuItems = ref([
  { label: '复制', action: 'copy' },

  { label: '粘贴', action: 'paste' },

  { label: '剪切', action: 'cut' },
]);

// 显示右键菜单

const showContextMenu = (event: { preventDefault: () => void; clientX: number; clientY: number }) => {
  event.preventDefault();
  showMenu.value = true;
  menuStyle.value = {
    left: `${event.clientX}px`,
    top: `${event.clientY}px`,
  };
};
// 关闭菜单

const closeContextMenu = () => {
  showMenu.value = false;
};

// 处理菜单项点击

const handleMenuItem = (item: { action: any }) => {
  console.log('执行操作:', item.action);
  closeContextMenu();
};
</script>

<style scoped>
.container {
  position: relative;

  min-height: 100vh;
}

.context-menu {
  position: fixed;

  background: white;

  border-radius: 4px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

  z-index: 1000;
}

.menu-item {
  cursor: pointer;
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  display: flex;
  align-items: center;
  vertical-align: middle;
  width: 200px;
  transition: background 0.2s;
}

.menu-item:hover {
  background: #f0f0f0;
}
</style>
